import React from 'react';
import './index.scss';
import { Card } from 'react-fule-ui';

function Item(props) {
  const { className, img, text } = props;
  return (
    <div
      className={`CssCard ${className}`}
      style={img && { backgroundImage: `url(${img})` }}
    >
      <div className="CssCard-main">
        <div className="CssCard-main__bg"></div>
        <div className="CssCard-main__content">{text}</div>
      </div>
    </div>
  );
}
export default function CssCard() {
  return (
    <>
      <Card>
        <Card.Header>基础展示</Card.Header>
        <Card.Body>
          <Item className="style1" />
          <Item className="style2" />
          <Item className="style3" />
          <Item className="style4" />
          <Item className="style5" />
          <Item className="style6" />
          <Item className="style7" />
          <Item className="style8" />
        </Card.Body>
      </Card>
      <Card>
        <Card.Header>进阶展示</Card.Header>
        <Card.Body>
          <Item
            className="style9"
            img="https://i.picsum.photos/id/633/400/600.jpg?hmac=W67tI_gE6AqeWGbXkEk_z4P57u6n4YefrsY85cv64n8"
            text="mask-composite实现，mask-composite实现，mask-composite实现，我们是需要你做哪些工具，垃圾索朗多吉阿拉斯加的垃圾睡了多久啊睡了多久啊圣诞节啦快结束的垃圾似的"
          />
          <Item
            className="style10"
            img="https://i.picsum.photos/id/633/400/600.jpg?hmac=W67tI_gE6AqeWGbXkEk_z4P57u6n4YefrsY85cv64n8"
            text="radial-gradient实现，radial-gradient实现，radial-gradient实现，我们是需要你做哪些工具，垃圾索朗多吉阿拉斯加的垃圾睡了多久啊睡了多久啊圣诞节啦快结束的垃圾似的"
          />
        </Card.Body>
      </Card>
    </>
  );
}
